<template>
  <div class="nav_box">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :router="true"
      :collapse="this.$store.state.isCollapse"
    >
      <el-submenu
        :index="index + ''"
        v-for="(menu, index) in menuConfig"
        :key="index"
      >
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.title }}</span>
        </template>
        <el-menu-item
          :index="submenu.path"
          v-for="(submenu, sindex) in menu.subs"
          :key="sindex"
          >{{ submenu.title }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      menuConfig: [
        {
          title: "商品管理",
          icon: "el-icon-s-tools",
          subs: [
            { title: "商品列表", path: "/good" },
            { title: "商品分类", path: "/category" },
            { title: "品牌管理", path: "/brand" },
            { title: "商品属性管理", path: "/attribute" },
          ],
        },
        {
          title: "订单中心",
          icon: "el-icon-s-management",
          subs: [{ title: "订单列表", path: "/order" }],
        },
        {
          title: "店铺运营",
          icon: "el-icon-service",
          subs: [
            { title: "专题管理", path: "/topic" },
            { title: "运营数据", path: "/statdata" },
          ],
        },
      ],
    };
  },
  methods: {},
  
  created() {
    let menu = this.$store.state.menu;
    // 把用户权限转换成对象
    let menuObj = menu.reduce((prev, current) => {
      let key = current.path;
      let value = true;
      prev[key] = value;
      return prev;
    }, {});

    let newMenuConfig = []; //当前用户的菜单配置

    // 循环完整菜单配置数组
    for (let i = 0; i < this.menuConfig.length; i++) {
      // 一级菜单
      let subs = []; //存放新的二级菜单
      for (let j = 0; j < this.menuConfig[i].subs.length; j++) {
        // 二级菜单
        let sub = this.menuConfig[i].subs[j];
        if (menuObj[sub.path]) {
          subs.push(sub);
        }
      }

      if (subs.length > 0) {
        newMenuConfig.push({
          ...this.menuConfig[i],
          subs,
        });
      }
    }
  },
};
</script>
 
<style lang = "less" scoped>
</style>